<template>
  <div class="goods">
    <div class="property">
      <img :src="goods.base64code"/>

      <div class="description">
	<div> 商品编号: {{goods.id}}</div>
	<div> 商品名称: {{goods.name}} </div>
	<div> 商品价格: {{goods.price}} </div>
	<div> 库存: {{goods.stock}} </div>
	<div> 类别: {{goods.type}} </div>
	<div> 介绍: {{goods.introduction}} </div>
      </div>
    </div>

    <div class="options">
      <!-- <button class="edit" @click="toggleEdit">edit</button> -->
      <GoodsEdit text="edit" :goods="goods" v-model:show="showedit" />
      <button class="delete" @click="toggleDelete">delete</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
 import { inject, onMounted, PropType, Ref, ref } from "@vue/runtime-core";
 import {GoodsService} from '@/service'
 import GoodsEdit from '@/components/GoodsEdit.vue'
 const props = defineProps({
   goods: Object as PropType<Goods>
 })

 const currentShowIndex = inject('currentShowIndex') as Ref<number>
 const shouldUpdate = inject('shouldUpdate') as Ref<boolean>
 const showedit = ref(false)
 function toggleEdit() {
   currentShowIndex.value = props.goods!.id
 }

 async function toggleDelete() {
   await GoodsService.deleteOne(props.goods!.id)
   shouldUpdate.value = true
 }
</script>

<style lang="scss" scoped>
 div.goods {
   border: 1px solid black;
   display: flex;
   justify-content: space-between;

   img {
     width: 100px;
     height: 100px;
   }

   div.property {
     display: flex;
     align-items: center;
     justify-content: space-around;

     div.description {
       display: grid;
       grid-template-columns: repeat(2, 150px);
       text-align: left;
     }
   }

   div.options {
     display: flex;
     align-items: center;
     padding: 5px;

     button.delete {
       background: red;
     }
   }
 }
</style>